<route>
{
  "meta":{
    "title":"应用授权",
    "showMenu" :true,
    "serialNum": 60,
    "envHide":"DESINGER,PREVIEW,PORTAL",
    "localism": "sys.authorization_center"
  }
}
</route>
<template>
  <div class="authorization" ref="card" v-loading="loading">
    <component v-if="!loading" :is="comName" @changeStatus="changeStatus" />
  </div>
</template>

<script>
import { getActivitedStatus } from "@/customApi/license.js";
import AuthComponents from "./__components__/AuthComponents.vue";
import AuthList from "./__components__/AuthList.vue";
import Unbind from "./__components__/Unbind.vue";
import { mapGetters } from "vuex";
import { Accesstoken } from "@/utils/auth";
export default {
  name: "authorization",
  components: {
    AuthList,
    AuthComponents,
    Unbind,
  },
  data() {
    return {
      loading: true,
      authStatus: "",
    };
  },
  computed: {
    ...mapGetters(["getUserVal"]),
    comName() {
      if (!this.authStatus || this.authStatus === "INACTIVE") {
        return "AuthComponents";
      } else if (this.authStatus === "NO_UNBIND") {
        return "Unbind";
      } else {
        return "AuthList";
      }
    },
  },
  async created() {
    await this.$store.dispatch("GetLicenseInfoDto");
    this.getAuthorizationStatus();
  },
  methods: {
    async getAuthorizationStatus() {
      this.loading = true;
      await getActivitedStatus().then(async (res) => {
        this.authStatus = res;
        this.loading = false;
      });
    },
    changeStatus({ type }) {
      if (type === "unbind") {
        if (!this.getUserVal.isSuperAdmin) {
          this.logout();
          this.$router.replace("/");
        } else {
          this.getAuthorizationStatus();
        }
      } else {
        this.getAuthorizationStatus();
      }
    },
    //登出
    logout() {
      Accesstoken.setAccessToken("");
      this.$store.commit("CLEAR_VISITED_VIEW");
      this.$store.commit("CLEAR_ROUTES");
      this.$store.commit("CLEAR_BLACK_BUTTONS");
      this.$store.commit("CLEAR_BLACK_BUTTONS_PROMISE");
      this.$store.commit("SET_USER_INFO", {});
    },
  },
};
</script>

<style lang="scss" scoped>
.authorization {
  &_status {
    margin-bottom: 24px;
    background-color: rgba(237, 237, 237, 1);
    border-radius: 4px;
    line-height: 44px;
    border: 1px rgba(231, 231, 231, 1);

    .ml80 {
      margin-left: 80px;
    }

    .item-content {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: inherit;
      position: relative;
      top: -2px;
    }
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px !important;
  }

  ::v-deep .el-dialog__body {
    border-top: none;

    .str {
      padding: 110px 40px 98px;
      font-size: 12px;
    }

    .qrbox {
      padding: 40px 0 60px;
    }

    .dymBtn {
      width: 132px;
    }
  }

  .onlineDialog {
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 17px;
    }

    .content {
      font-size: 12px;
      color: #c0c4cb;
      margin-bottom: 34px;
    }
  }
}
</style>
